<template>
    <document>
        <h1>MModal / 模态窗</h1>
        
        <h2>Summary</h2>
        <h6>概述</h6>

        <p>模态窗是一个拥有铺满整个屏幕的黑色半透明遮罩，并在其上方显示自定义内容窗口的组件。</p>
        <p>该组件的窗体会自适应行内样式、或用户自定义的内容，但是模态窗的尺寸最大不会超过浏览器窗口大小。除非用户强制设置使模态窗超出浏览器的窗口大小，此时，页面会自动出现滚动条</p>
        <p>请尝试点击下方的按钮查看模态窗组件的效果</p>

        <hr />

        <p>The MModal can pop up a window with the custom content by man-made, and float on a half opacity black shadow.</p>
        <p>MModal will auto resize by the content. But it won't out of the window. Unless you force to set the size for the content, and the page will show up the scroll.</p>
        <p>Please try to click the button below the Example.</p>

        <h2>Example</h2>
        <h6>效果演示</h6>
        <m-button type="pirmary" @click.native="showmodal()">
            Open The Modal
        </m-button>

        <m-modal name="modal">
            <div style="width:320px; padding:24px;">
                <h1 style="margin:16px 0px;">Example Modal</h1>
                <p style="text-align:justify;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione mollitia facilis exercitationem repellat, ex expedita aperiam ut esse repellendus officia laudantium, dolorum quo at nemo corrupti earum sunt officiis consectetur?</p>

                <m-button style="float:right; margin-bottom:32px;" color="danger" type="pirmary" @click.native="closemodal()">Close</m-button>
            </div>
        </m-modal>

        <h2>Usage</h2>
        <h6>使用方法</h6>

<codeblock>
    &lt;m-modal name="modal"&gt;
        &lt;h1&gt;Example Modal&lt;/h1&gt;
        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione mollitia facilis exercitationem repellat, ex expedita aperiam ut esse repellendus officia laudantium, dolorum quo at nemo corrupti earum sunt officiis consectetur?&lt;/p&gt;
    &lt;/m-modal&gt;
</codeblock>
<codeblock>
    new Vue({
        ...
        methods:{
            open_modal:function(){
                this.mirror.open("modal");
            },
            close_modal:function(){
                this.mirror.close("modal");
            }
        }
        ...
    })

    //Use JavaScript to control the modal
</codeblock>

        <h2>Props</h2>
        <h6>组件属性</h6>

        <table>
            <tr>
                <th>Names</th>
                <th>Meaning</th>
                <th>Value</th>
                <th>Note</th>
            </tr>
            <tr>
                <td>name</td>
                <td>
                    模态窗的唯一名<br>
                    The unique name for the Modal
                </td>
                <td>
                    String
                </td>
                <td>REQUIRED</td>
            </tr>
            <tr>
                <td>close</td>
                <td>
                    是否可以通过点击遮罩关闭模态窗<br>
                    Can user close the Modal by click shadow mask
                </td>
                <td>
                    true | false
                </td>
                <td>
                    Default - true
                </td>
            </tr>
        </table>

        <h2>Functions</h2>
        <h6>相关函数</h6>

        <function>
            <h1>Vue.mirror.show(name)</h1>
            <p>显示模态窗</p>
            <p>Open the Modal</p>
            <table>
                <tr>
                    <td>
                        name
                    </td>
                    <td>
                        String
                    </td>
                    <td>
                        模态窗唯一名<br>
                        The unique name for the Modal
                    </td>
                </tr>
            </table>
        </function>
        
        <function>
            <h1>Vue.mirror.close(name)</h1>
            <p>关闭模态窗</p>
            <p>Close the Modal</p>
            <table>
                <tr>
                    <td>
                        name
                    </td>
                    <td>
                        String
                    </td>
                    <td>
                        模态窗唯一名<br>
                        The unique name for the Modal
                    </td>
                </tr>
            </table>
        </function>
    </document>
</template>

<script>
    export default {
        methods:{
            showmodal:function(){
                this.mirror.open("modal");
            },
            closemodal:function(){
                this.mirror.close("modal");
            }
        }
    }
</script>